<template>
  <div class="container" v-loading="loading">
    <div class="toolbar">
      <div class="inner-toolbar">
        <div class="toolbar-btns">
          <div class="btn-box">
            <el-button size="mini" type="primary" @click="selectgoodslist">选择商品</el-button>
            <el-button size="mini" type="primary" @click="batchDeleteGoods">删除</el-button>
            <el-button size="mini" type="primary" @click="saveSetting">批量保存</el-button>
            <el-button size="mini" type="primary" @click="importExcel">批量修改</el-button>
            <el-button size="mini" type="primary" @click="exportExcel">导出Excel</el-button>
            <el-button size="mini" type="primary" >
              <a href="https://egale-shop.oss-cn-hangzhou.aliyuncs.com/excel/%E7%A4%BE%E5%9B%A2%E5%95%86%E5%93%81%E6%98%8E%E7%BB%86%E8%A1%A8.xlsx">下载模板</a>
            </el-button>
          </div>
          <div class="conditions-box">
            <!--店铺分组-->
            <div class="conditions">
              <span>店铺分组：</span>
              <en-category-picker class="choose-machine" size="mini" @changed="changeGoodsCateGory" :clearable='true'/>
            </div>
            <!--社团商品状态-->
            <div class="conditions">
              <span>商品状态：</span>
              <el-select class="choose-machine" v-model="params.status" clearable @change="handleSelect">
                <el-option label="已上架" value="50"></el-option>
                <el-option label="已下架" value="40"></el-option>
                <el-option label="待上架" value="20"></el-option>
              </el-select>
            </div>
            <div class="toolbar-search">
              <!-- <en-table-search @search="searchEvent" placeholder="请输入商品名称"/> -->
              <en-table-search
                @search="searchEvent"
                @advancedSearch="advancedSearchEvent"
                advanced
                advancedWidth="450"
                placeholder="请输入商品名称">
                <template slot="advanced-content">
                  <el-form ref="advancedForm" :model="advancedForm" label-width="78px" :rules="advancedFormRules">
                    <el-form-item label="商品ID" prop="goods_ids">
                      <el-input v-model="advancedForm.goods_ids" placeholder="请输入ID，多个ID用“，”分隔" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="参团数量" prop="goods_num">
                      <el-input v-model="advancedForm.goods_num" placeholder="请输入参团数量" clearable></el-input>
                    </el-form-item>
                  </el-form>
                </template>
              </en-table-search>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-form :model="pageData" :rules="goodsListRules" ref="goodsListForm">
      <el-table ref="table" :data="pageData.data" @sort-change='tableSortChange' @selection-change="selectionChange" highlight-current-row
        :height="tableHeight">
        <el-table-column fixed type="selection" width="43"></el-table-column>
        <el-table-column label="活动名称" prop="shetuan_name" min-width="120">
        </el-table-column>
        <el-table-column prop="shetuan_status_text" label="活动状态" min-width="70">
          <template slot-scope="scope">
            <span :class="scope.row.shetuan_status==30?'color-red':scope.row.shetuan_status==40?'color-success':''">{{scope.row.shetuan_status_text}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="shetuan_goods_status_text" label="商品上架" min-width="70">
          <template slot-scope="scope">
            <span
              :class="scope.row.status==40?'color-red':scope.row.status==50?'color-success':''">{{scope.row.shetuan_goods_status_text}}</span>
          </template>
        </el-table-column>
        <el-table-column label="参团商家" prop="seller_name" min-width="120"></el-table-column>
        <el-table-column label="团购大图" prop="thumbnail" min-width="85">
          <template slot-scope="scope">
            <img class="img_width" :src="scope.row.thumbnail" />
          </template>
        </el-table-column>
        <el-table-column label="参团商品名称" prop="goods_name" min-width="200">
          <template slot-scope="scope">
            <span v-html="scope.row.goods_name"></span><br/>
            <span class="gray_font">ID:<span v-html="scope.row.goods_id"></span></span>
          </template>
        </el-table-column>
        <el-table-column label="商品分组" prop="shop_cat_ids" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="cat-show-box">
              <div class="cat-show-row">
                <div class="cat-show-item"
                  v-for="(catItem, catIndex) in scope.row.shop_cat_items_list"
                  :key="catIndex"
                  v-html="catItem.cat_path_name"></div>
              </div>
              <div class="cat-edit">
                <span class="table-edit el-icon-edit-outline" @click="showCatDialog(scope.row, scope.$index)"></span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="优先级" prop="priority" min-width="120" sortable="custom">
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.priority'" :rules="goodsListRules.priority">
              <el-input class="i_w" v-model="scope.row.priority" size="medium" />
            </el-form-item>
          </template>
        </el-table-column>
        <!-- <el-table-column label="商品库存" prop="shop_cat_id" min-width="200" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row.needQuantityEdit">
                <el-input v-model="scope.row.enable_quantity" @blur="reserveGoods(scope.$index, scope.row)"></el-input>
            </div>
            <div v-else class="show-cat-name">
              <span class="cat-name">{{scope.row.enable_quantity}}</span>
              <span class="table-edit el-icon-edit-outline" @click="confirmEnableQuantity(scope.$index, scope.row)"></span>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="市场价" prop="origin_price" min-width="80">
          <template slot-scope="scope">
            <span v-if="!!scope.row.origin_price">￥{{scope.row.origin_price}}</span>
          </template>
        </el-table-column>
        <el-table-column label="店铺价" prop="sales_price" min-width="100">
          <template slot-scope="scope">
            <span v-if="!!scope.row.sales_price">￥{{scope.row.sales_price}}</span>
          </template>
        </el-table-column>
        <el-table-column label="成本价" prop="cost" min-width="100">
          <template slot="header" slot-scope="{}">
            <span class="color-red">*</span>
            <span>成本价</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.cost'" :rules="goodsListRules.cost">
              <el-input class="i_w" disabled v-model="scope.row.cost" size="medium">
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="团购价" prop="shetuan_price" min-width="100" align="center">
          <template slot="header" slot-scope="{}">
            <span class="color-red">*</span>
            <span>团购价</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.shetuan_price'" :rules="goodsListRules.shetuan_price">
              <el-input class="i_w" v-model="scope.row.shetuan_price" size="medium">
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="参团数量" prop="goods_num" min-width="100" align="center">
          <template slot="header" slot-scope="{}">
            <span class="color-red">*</span>
            <span>参团数量</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.goods_num'" :rules="goodsListRules.goods_num">
              <el-input class="i_w" v-model="scope.row.goods_num" size="medium" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="可用库存" prop="enable_quantity" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{!scope.row.enable_quantity ? 0 : scope.row.enable_quantity}}</span>
          </template>
        </el-table-column>
        <el-table-column label="虚拟数量" prop="visual_num" min-width="100" align="center">
          <template slot="header" slot-scope="{}">
            <span class="color-red">*</span>
            <span>虚拟数量</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.visual_num'" :rules="goodsListRules.visual_num">
              <el-input class="i_w" v-model="scope.row.visual_num" size="medium" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="限购数量" prop="limit_num" min-width="100" align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.limit_num'" :rules="goodsListRules.limit_num">
              <el-input class="i_w" v-model="scope.row.limit_num" size="medium" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="团长佣金比例" prop="first_rate" align="center" min-width="120">
          <template slot="header" slot-scope="{}">
            <span class="color-red">*</span>
            <span>团长佣金比例</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.first_rate'" :rules="goodsListRules.first_rate">
              <el-input class="i_w" v-model="scope.row.first_rate" size="medium">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="二级团长佣金" prop="second_rate" align="center" min-width="120">
          <template slot="header" slot-scope="{}">
            <span class="color-red">*</span>
            <span>二级团长佣金</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.second_rate'" :rules="goodsListRules.second_rate">
              <el-input class="i_w" v-model="scope.row.second_rate" size="medium">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="自提站点佣金" prop="self_raising_rate" align="center" min-width="120">
          <template slot="header" slot-scope="{}">
            <span class="color-red">*</span>
            <span>自提站点佣金</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.self_raising_rate'" :rules="goodsListRules.self_raising_rate">
              <el-input class="i_w" v-model="scope.row.self_raising_rate" size="medium">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="邀请佣金比例" prop="invite_rate" align="center" min-width="120">
          <template slot-scope="scope">
            <el-form-item :prop="'data.'+scope.$index+'.invite_rate'" :rules="goodsListRules.invite_rate">
              <el-input class="i_w" v-model="scope.row.invite_rate" size="medium">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 20 || scope.row.status === 40" type="primary" size="mini"
              @click="goodOnlineFn(scope.row)">上架</el-button>
            <el-button type="danger" size="mini" v-if="scope.row.status===50" @click="goodOfflineFn(scope.row)">下架
            </el-button>
            <el-button type="primary" size="mini" @click="updateGoods(scope.$index, scope.row)">保存</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="bottom-total">
      <div>
        <el-button size="mini" type="primary" @click="upGoods">批量上架</el-button>
        <el-button size="mini" type="primary" @click="dropGoods">批量下架</el-button>
        <span class="f_weight">批量修改：</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            <span class="batch_f" @click="modifyValues">虚拟数量</span><i class="el-icon-arrow-up el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <p class="batch_f" @click="modifyValues">限购数量</p>
            <p class="batch_f" @click="modifyValues">团长佣金比例</p>
            <p class="batch_f" @click="modifyValues">二级团长佣金</p>
            <p class="batch_f" @click="modifyValues">自提站点佣金</p>
            <p class="batch_f" @click="modifyValues">邀请佣金比例</p>
            <p class="batch_f" @click="modifyValues">团购价格</p>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div>
        <el-pagination
          slot="pagination"
          v-if="paginationData"
          @size-change="handlePageSizeChange"
          @current-change="handlePageCurrentChange"
          :current-page="paginationData.page_no"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="paginationData.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationData.data_total">
        </el-pagination>
      </div>
    </div>
    <!-- 商品选择器 -->
    <en-goods-sku-picker
      type="seller"
      goods-type="NORMAL"
      :show="showDialog"
      :sku="true"
      :api="goodsApi"
      :multipleApi="multipleApi"
      :defaultData="skuIds"
      :categoryApi="categoryApi"
      :limit="maxsize"
      @confirm="refreshFunc"
      @close="showDialog = false"/>
    <!-- 批量修改dialog -->
    <el-dialog :title="'批量修改 > '+btnVal" :visible.sync="modifyAllDialog" width="385px">
      <el-form ref="modifyAllForm" :model="modifyAll" label-width="110px">
        <span class="notice color-red" v-if="!multipleSelection.length">提示：你选择 全部商品</span>
        <span class="notice color-red" v-else>提示：你选择 {{ multipleSelection.length}} 种商品</span>
        <el-form-item class="m_t" :label="btnVal" prop="val">
          <el-input v-model="modifyAll.val" required></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyAllDialog = false">取 消</el-button>
        <el-button type="primary" @click="affirmModify">确 定</el-button>
      </span>
    </el-dialog>
    <!--商品分组-->
    <el-dialog
      width="420px"
      title="修改商品分组"
      class="cat-dialog"
      v-loading="dialogLoading"
      :visible.sync="catDialog">
      <el-form ref="catForm" :model="catForm" label-width="80px">
        <el-form-item v-show="false" prop="goods_id">
          <el-input type="hidden" v-model="catForm.goods_id"></el-input>
        </el-form-item>
        <el-form-item label="商品分组" required>
          <el-form-item
            v-for="(catItem, index) in catForm.shop_cat_ids"
            :key="index"
            :prop="`shop_cat_ids.${index}.shop_cat_id`">
            <en-category-picker
              clearable
              :defaultVal="catItem.shop_cat_id"
              @changed="changeShopCat($event, index)"/>
            <el-tooltip class="item" effect="dark" content="删除分组" placement="top">
              <el-button
                v-if="catForm.shop_cat_ids.length>1"
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                @click="deleteCat(index)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="添加分组" placement="top">
              <el-button
                v-if="catForm.shop_cat_ids.length===index+1"
                type="success"
                icon="el-icon-plus"
                plain
                circle
                @click="addCat()"></el-button>
            </el-tooltip>
          </el-form-item>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="catDialog = false">取 消</el-button>
        <el-button v-loading="dialogLoading" type="primary" @click="catSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 批量导入 -->
    <el-dialog title="导入Excel" width="450px" :visible.sync="importDialog">
      <el-form
        ref="importForm"
        label-width="100px"
        size="small"
        :model="importForm"
        :rules="importFormRules"
        >
        <el-form-item prop="uploadFile" label-width="0">
          <div class="upload">
            <div class="el-upload__tip" slot="tip">只能上传 .xlsx, .xls文件</div>
              <el-upload
                v-model="importForm.uploadFile"
                :limit="1"
                drag
                ref="upload"
                action="#"
                :http-request="excelLoadShow"
                :on-change="onUploadChange"
                >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary"  @click="submitFileForm('importForm')">确 定</el-button>
        <el-button size="small" @click="handleCancel('importForm')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as API_goodsCategory from '@/api/goodsCategory'
  import * as API_Goods from '@/api/goods'
  import * as API_Promotion from '@/api/promotion'
  import Storage from '@/utils/storage'
  import { api } from '~/ui-domain'
  let actionImportUrl = `${api.seller}/seller/promotion/shetuan/shetuanGoodsImport`;
  import { CategoryPicker, GoodsSkuPicker } from '@/components'
  import { cloneObj } from '@/utils/index'

  import { api_model } from '~/ui-domain'
  import { Foundation } from '~/ui-utils'
  import md5 from 'js-md5'

  export default {
    name: 'shetuanGoodsList',
    components: {
      [CategoryPicker.name]: CategoryPicker,
      [GoodsSkuPicker.name]: GoodsSkuPicker
    },
    data() {
      return {
        multipleSelection: [],
        /** 列表loading状态 */
        loading: false,
        showDialog: false,
        // 导入excel的弹框
        importDialog: false,
        /** 列表参数 */
        params: {
          page_no: 1,
          page_size: 50,
          shetuan_id: '',
          shop_cat_id: undefined,
          status: undefined,
          shetuanGoodsStatus: undefined
        },
        advancedForm: {
          goods_ids: undefined
        },
        advancedFormRules: {
          goods_ids: [
            { required: false, message: '请输入年龄', trigger: 'blur' },
            { pattern: /^[0-9,，,\n]+$/, message: '请输入正确的ID，多个ID用","分隔', trigger: 'blur' }
          ]
        },
        addArray: [],
        addskuData: {
          sku_id: ''
        },
        /** 商品分组数据*/
        categoryList: [],
        /** 活动信息*/
        activityData: {
          goods_data: []
        },
        /** 商品选择器列表api*/
        goodsApi: 'seller/goods/skus?market_enable=1&is_auth=1',
        multipleApi: 'seller/goods/skus/@ids/details',
        /** 商城分类api */
        categoryApi: 'seller/goods/category/0/children',
        skuIds: [],
        /** 后台对应的团购商品Ids*/
        hisIds: new Map(),
        /** 商品选择器最大长度*/
        maxsize: 0,
        /** 列表数据 */
        pageData: {},
        /** 分页数据 */
        paginationData: {},
        /** 当前操作的表格序列*/
        _order: 0,
        // 参团状态
        shetuanStatus: '',
        slectVal: '',
        // 导入的form表单
        importForm: {
          uploadFile: undefined
        },
        importFormRules: {
          uploadFile: [
            {
              required: true,
              message: '上传文件不能为空',
              trigger: 'blur'
            }
          ]
        },
        //商品列表验证
        goodsListRules: {
          shetuan_price: [{
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9]+.?[0-9]*$/,
            message: '请输入整数或小数！'
          }
          ],
          goods_num: [{
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^[1-9][0-9]*$/,
            message: '请输入整数！'
          }
          ],
          visual_num: [{
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9]*$/,
            message: '请输入整数！'
          }
          ],
          limit_num: [{
            pattern: /^([0-9]|\s)*$/,
            message: '请输入整数！'
          }],
          first_rate: [{
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^([0-9]+\.[0-9]|\d)*$/,
            message: '请输入整数或小数！'
          }
          ],
          second_rate: [{
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^([0-9]+\.[0-9]|\d)*$/,
            message: '请输入整数或小数！'
          }
          ],
          self_raising_rate: [{
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^([0-9]+\.[0-9]|\d)*$/,
            message: '请输入整数或小数！'
          }
          ],
          invite_rate: [{
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^([0-9]+\.[0-9]|\d|\s)*$/,
            message: '请输入整数或小数！'
          }
          ],
          priority: [
            {
              required: true,
              message: '请输入有效值',
              trigger: 'blur'
            },
            {
              pattern: /^[0-9]+$/,
              message: '请输入正整数'
            }
          ],
          cost: [
            {
              required: true,
              message: '请输入有效值',
              trigger: 'blur'
            },
            {
              pattern: /^([0-9]+\.[0-9]|\d|\s)*$/,
              message: '请输入整数或小数！'
            }
          ]
        },
        dialogLoading: false,
        // 商品分组弹层
        catDialog: false,
        editCatRow: undefined,
        catForm: {
          update_type: 0,
          goods_id: undefined,
          shop_cat_ids: []
        },
        //批量修改
        modifyAllDialog: false,
        batch: undefined,
        activeVal: undefined,
        btnVal: '',
        //批量修改数据
        modifyAll: {
          val: ''
        },
        //批量修改验证
        batchRules: {
          val: [{
            required: true,
            message: '请输入有效值！',
            trigger: 'blur'
          },
          {
            pattern: /^\d+$/,
            message: '请输入有效值！'
          }
          ]
        }
      }
    },
    /**
     * @date 2020/08/24
     * @author kjh
     * @description {初始化适应屏幕的高度}
     */
    computed: {
      tableHeight: function () {
        return document.documentElement.clientHeight - 250 + 'px';
      }
    },
    mounted() {
      if (this.$route.params && this.$route.params.shetuan_id) {
        this.params.shetuan_id = this.$route.params.shetuan_id;
      }
      // 获取分组数据
      // await this.getGoodsCategory();
      // 获取商品数据
      this.GET_ShetuanGoodsList();
    },
    methods: {
      /** 分页大小发生改变 */
      handlePageSizeChange(size) {
        this.params.page_size = size;
        this.GET_ShetuanGoodsList();
      },

      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page;
        this.GET_ShetuanGoodsList();
      },
      /**
       * @date 2020/08/20
       * @author kjh
       * @description {搜索事件触发}
       */
      searchEvent(data) {
        this.params = {
          ...this.params,
          keyword: data
        };
        this.params.page_no = 1;
        this.GET_ShetuanGoodsList();
      },
      /** 高级搜索事件触发 */
      advancedSearchEvent() {
        this.$refs['advancedForm'].validate((valid) => {
          if (valid) {
            this.params = {
              ...this.params,
              ...this.advancedForm
            };
            this.params.page_no = 1;
            this.GET_ShetuanGoodsList();
          }
        })
      },
      /**
       * @date 2020/08/23
       * @author kjh
       * @description {逐个数据验证表单}
       */
      moreDtaValid(index) {
        let _valid = [];
        let _validData = ['shetuan_price', 'goods_num', 'visual_num', 'limit_num',
          'first_rate', 'second_rate', 'self_raising_rate', 'priority'
        ];
        _validData.forEach(item => {
          _valid.push(`data.${index}.${item}`);
        });
        let _isvalid = true;
        this.$refs.goodsListForm.validateField(_valid, (valid) => {
          if (valid) {
            _isvalid = false;
            return;
          }
        })
        if (_isvalid === false) {
          return false;
        }
      },
      /**
       * @date 2020/08/18
       * @author kjh
       * @description {修改单行数据}
       */
      updateGoods(index, row) {
        if (this.moreDtaValid(index) === false) {
          return;
        }
        this.$confirm('确认修改当前数据, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          this.loading = true;
          API_Promotion.apiUpdateGoods(row).then(response => {
            this.loading = false;
            this.$message.success('修改成功！');
            this.GET_ShetuanGoodsList();
          }).catch(() => {
            this.loading = false
          })
        })
      },
      /**
       * @date 2020/08/19
       * @author kjh
       * @description {商品批量上架}
       */
      upGoods() {
        if (!this.multipleSelection.length) {
          this.$message.warning('请选择商品！');
          return;
        }
        // 获取批量选中的序列号
        let _moreIndex = [];
        let _isMoreValid = true;
        this.multipleSelection.forEach((val) => {
          this.pageData.data.forEach((v, i) => {
            if (val.id === v.id) {
              _moreIndex.push(i);
            }
          })
        })
        let _validIndex = [];
        let _stringIndex = '';
        _moreIndex.forEach((index) => {
          if (this.moreDtaValid(index) === false) {
            _isMoreValid = false;
            index++;
            _validIndex.push(index);
          }
        });
        _stringIndex = _validIndex.toString();
        if (_validIndex !== []) {
          this.$alert(`您的第${_stringIndex}行表格有必填字段为空，不能上架，请先输入并保存后再上架。`, '数据为空', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: '已取消上架'
              });
            }
          });
        }

        if (_isMoreValid === false) {
          return;
        }
        this.$confirm('请确认所有商品都已设置佣金比例并已保存, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _selectIds = [];
          for (let item of this.multipleSelection) {
            _selectIds.push(item.id);
            if (item.status === 50) {
              this.$message.warning('选中的商品状态不能为已上架！');
              return;
            }
          }
          let _params = {
            'goods_ids': _selectIds
          };
          this.loading = true;
          API_Promotion.upGoodsByIds(_params).then((res) => {
            this.loading = false;
            this.$message.success('批量上架成功');
            this.params.page_no = 1;
            this.GET_ShetuanGoodsList();
          }).catch(() => {
            this.loading = false;
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量上架'
          });
        });
      },
      /**
       * @date 2020/08/19
       * @author kjh
       * @description {商品批量下架}
       */
      dropGoods() {
        if (!this.multipleSelection.length) {
          this.$message.warning('请选择商品！');
          return;
        }
        let _selectIds = [];
        for (let item of this.multipleSelection) {
          _selectIds.push(item.id);
          if (item.status !== 50) {
            this.$message.warning('选中的商品状态不能为已下架！');
            return;
          }
        }
        let _params = {
          'goods_ids': _selectIds
        };
        this.loading = true;
        API_Promotion.dropGoodsByIds(_params).then((res) => {
          this.loading = false;
          this.$message.success('批量下架成功');
          this.params.page_no = 1;
          this.GET_ShetuanGoodsList();
        }).catch(() => {
          this.loading = false;
        });
      },
      /** 获取商品分组列表 */
      getGoodsCategory() {
        this.loading = true;
        API_goodsCategory.getGoodsCategoryList().then(response => {
          this.loading = false;
          this.categoryList = response;
        }).catch(() => {
          this.loading = false;
        });
      },
      /**
       * @date 2020/06/15
       * @author lxw
       * @description {表单重置}
       */
      resetForm(formName) {
        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields();
        }
      },
      /**
        * @date 2020/10/15
        * @author wolfMan
        * @description {显示商品分组弹层}
      */
      showCatDialog(_row, _index) {
        this.editCat = {
          row: _row,
          index: _index
        };
        this.resetForm('catForm');
        this.catDialog = true;
        let { shop_cat_items_list } = _row;
        let _catList = _row.shop_cat_items_list;
        this.catForm = {
          goods_id: _row.goods_id,
          shop_cat_ids: !_catList || !_catList.length ? [{}] : _catList
        };
      },
      /**
        * @date 2020/10/15
        * @author wolfMan
        * @description {显示商品分组弹层}
      */
      setBatchUpdateShopCat(_row, _index) {
        this.editCat = {
          row: _row,
          index: _index
        };
        this.resetForm('catForm');
        this.catDialog = true;
        let { shop_cat_items_list } = _row;
        let _catList = _row.shop_cat_items_list;
        this.catForm = {
          goods_id: _row.goods_id,
          shop_cat_ids: !_catList || !_catList.length ? [{}] : _catList
        };
      },
      /**
        * @date 2020/10/15
        * @author wolfMan
        * @description {添加分组}
      */
      addCat() {
        let { shop_cat_ids } = this.catForm;
        shop_cat_ids.push({});
        this.catForm.shop_cat_ids = shop_cat_ids;
      },
      /**
        * @date 2020/10/15
        * @author wolfMan
        * @description {删除分组}
      */
      deleteCat(_index) {
        let { shop_cat_ids } = this.catForm;
        shop_cat_ids.splice(_index, 1);
        this.catForm.shop_cat_ids = shop_cat_ids;
      },
      /**
        * @date 2020/10/15
        * @author wolfMan
        * @description {分组切换及时改变}
      */
      changeShopCat(val, _index) {
        let _cat = JSON.parse(JSON.stringify(this.catForm.shop_cat_ids[_index]));
        _cat.shop_cat_id = val[val.length -1];
        this.catForm.shop_cat_ids[_index] = _cat;
      },
      /**
        * @date 2020/10/15
        * @author wolfMan
        * @description {保存商品分组}
      */
      catSubmit() {
        this.dialogLoading = true;
        let _form = JSON.parse(JSON.stringify(this.catForm));
        let { goods_id, shop_cat_ids } = _form;
        shop_cat_ids = shop_cat_ids.map(item => {
          return item.shop_cat_id;
        });
        let _params = {
          goods_id,
          shop_cat_ids
        };
        API_Goods.updateShopCat(_params).then(response => {
          this.dialogLoading = false;
          if (response) {
            let { row, index } = this.editCat;
            row.shop_cat_items_list = response;
            this.$set(this.pageData.data, index, row);
            this.catDialog = false;
          } else {
            this.$message.error('商品分组修改失败！');
          }
        }).catch(() => {
          this.dialogLoading = false;
        });
      },
      /**
       * @date 2020/08/20
       * @author kjh
       * @description {商品库存保存}
       */
      reserveGoods(_index, _row) {
        this.confirmEnableQuantity(_index, _row);
        let _goods_id = _row.goods_id;
        let _params = [{
          sku_id: _row.sku_id,
          quantity_count: _row.enable_quantity
        }];
        const _res = _params.some(key => {
          return !(parseInt(key.quantity_count) >= 0 && parseInt(key.quantity_count) < 99999999) || !/^[0-9]\d*$/
            .test(key.quantity_count);
        });
        if (_res) {
          this.$message.error('库存须为0 - 99999999之间的整数');
          return;
        }
        API_Goods.reserveStockGoods(_goods_id, _params).then(() => {
          this.goodsStockshow = false;
          this.$message.success('库存商品保存成功');
          this.GET_GoodsList();
        })
      },
      /**
       * @date 2020/08/20
       * @author kjh
       * @description {商品库存修改}
       */
      confirmEnableQuantity(_index, _row) {
        _row.needQuantityEdit = !_row.needQuantityEdit;
        this.$set(this.pageData.data, _index, _row);
      },
      /**
       * @date 2020/06/10
       * @author lxw
       * @description {保存设置}
       */
      saveSetting() {
        if (!this.multipleSelection.length) {
          this.$message.warning('请选择活动商品！');
          return;
        }
        // 获取批量选中的序列号
        let _moreIndex = [];
        let _isMoreValid = true;
        this.multipleSelection.forEach((val) => {
          this.pageData.data.forEach((v, i) => {
            if (val.id === v.id) {
              _moreIndex.push(i);
            }
          })
        })
        _moreIndex.forEach((index) => {
          if (this.moreDtaValid(index) === false) {
            _isMoreValid = false;
          }
        });
        if (_isMoreValid === false) {
          return;
        }
        let obj = {
          goods_list: this.multipleSelection
        };
        this.$confirm(`已选中${this.multipleSelection.length}个商品，确认修改, 是否继续?`, '提示', {
          type: 'warning'
        }).then(() => {
          this.loading = true
          API_Promotion.amendGoodsInfo(obj).then(response => {
            this.loading = false;
            this.$message.success('修改成功！');
            this.GET_ShetuanGoodsList();
          }).catch(() => {
            this.loading = false;
          });
        });
      },
      /**
        * @date 2020/10/20
        * @author kaiqiang
        * @description { 覆盖原有上传文件的方法 }
      */
      excelLoadShow(content) {
        this.files = content.file;
      },
      /**
        * @date 2020/10/20
        * @author kaiqiang
        * @description { 导入excel }
      */
      importExcel() {
        this.importDialog = true;
      },
      /**
        * @date 2020/10/22
        * @author kaiqiang
        * @description { 切换上传的文件 }
      */
      onUploadChange(file, fileList) {
        this.importForm.uploadFile = file
      },
      /**
        * @date 2020/10/20
        * @author kaiqiang
        * @description { 导入的确定按钮 }
      */
      // submitFileForm(importForm) {
      //   this.$refs[importForm].validate((valide) => {
      //     if (valide) {
      //       const loading = this.$loading({
      //         lock: true,
      //         text: 'Loading',
      //         spinner: 'el-icon-loading',
      //         background: 'rgba(0, 0, 0, 0.7)'
      //       });
      //       // 自定义上传
      //       let file = new FormData();
      //       file.append('uploadFile', this.files);
      //       let data;
      //       // 拿到Token
      //       let refreshToken = Storage.getItem('seller_refresh_token');
      //       if (refreshToken) {
      //         if (api_model === 'pro') {
      //           console.log(2333)
      //           const uid = Storage.getItem('seller_uid')
      //           const nonce = Foundation.randomString(6)
      //           const timestamp = parseInt(new Date().getTime() / 1000)
      //           const sign = md5(uid + nonce + timestamp + refreshToken)
      //           actionImportUrl = actionImportUrl + `?uid=${uid}&nonce=${nonce}&timestamp=${timestamp}&sign=${sign}`
      //           data = {
      //             'uuid': Storage.getItem('seller_uuid')
      //           }
      //         } else {
      //           console.log(244)
      //           data = { 'Authorization': refreshToken }
      //         }
      //       }
      //       this.$http({
      //         url: actionImportUrl,
      //         method: 'post',
      //         data: file,
      //         responseType: 'blob',
      //         headers: data
      //       }).then(response => {
      //         loading.close();
      //         if (response.data.size !== 0) {
      //           this.$confirm('当前导入商品信息的保存出错了,是否下载查看')
      //             .then(_ => {
      //               // 处理返回的文件流
      //               let blob = new Blob([response.data], {
      //                 type: 'application/vnd.ms-excel;charset=utf-8'
      //               });
      //               let date = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate();
      //               const fileName = date + name + '保存出错的社团商品明细.xlsx';
      //               this.$refs.upload.clearFiles();
      //               this.importForm.uploadFile = undefined;
      //               this.importDialog = false;
      //               if ('download' in document.createElement('a')) {
      //                 // 非IE下载
      //                 const elink = document.createElement('a');
      //                 elink.download = fileName;
      //                 elink.style.display = 'none';
      //                 elink.href = URL.createObjectURL(blob);
      //                 document.body.appendChild(elink);
      //                 elink.click();
      //                 URL.revokeObjectURL(elink.href); // 释放URL 对象
      //                 document.body.removeChild(elink);
      //               }
      //             }).catch(_ => {
      //               this.$message({
      //                 type: 'warning',
      //                 message: '操作已取消'
      //               })
      //               this.$refs.upload.clearFiles();
      //               this.importForm.uploadFile = undefined;
      //               this.importDialog = false;
      //             });
      //         } else {
      //           this.$message({
      //             type: 'success',
      //             message: '操作成功'
      //           })
      //           this.$refs.upload.clearFiles();
      //           this.importForm.uploadFile = undefined;
      //           this.importDialog = false;
      //           this.GET_ShetuanGoodsList();
      //         }
      //       }).catch(error => {
      //         loading.close();
      //         console.log(error)
      //       })
      //     }
      //   })
      // },
      submitFileForm() {
        let uploadFile = new FormData();
        uploadFile.append('uploadFile', this.files);
        API_Promotion.shetuanGoodsImport(uploadFile).then(response => {
          console.log(response)
          if (response.size !== 0) {
            this.$confirm('当前导入商品信息的保存出错了,是否下载查看')
              .then(_ => {
                // 处理返回的文件流
                let blob = new Blob([response.data], {
                  type: 'application/vnd.ms-excel;charset=utf-8'
                });
                let date = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate();
                const fileName = date + name + '保存出错的社团商品明细.xlsx';
                this.$refs.upload.clearFiles();
                this.importForm.uploadFile = undefined;
                this.importDialog = false;
                if ('download' in document.createElement('a')) {
                  // 非IE下载
                  const elink = document.createElement('a');
                  elink.download = fileName;
                  elink.style.display = 'none';
                  elink.href = URL.createObjectURL(blob);
                  document.body.appendChild(elink);
                  elink.click();
                  URL.revokeObjectURL(elink.href); // 释放URL 对象
                  document.body.removeChild(elink);
                }
              }).catch(_ => {
                this.$message({
                  type: 'warning',
                  message: '操作已取消'
                })
                this.$refs.upload.clearFiles();
                this.importForm.uploadFile = undefined;
                this.importDialog = false;
              });
          } else {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.$refs.upload.clearFiles();
            this.importForm.uploadFile = undefined;
            this.importDialog = false;
            this.GET_ShetuanGoodsList();
          }
        })
      },
      /**
        * @date 2020/10/20
        * @author kaiqiang
        * @description { 导入excel取消按钮 }
      */
      handleCancel(importForm) {
        this.$refs.upload.clearFiles();
        this.importForm.uploadFile = undefined;
        this.importDialog = false;
      },
      /**
        * @date 2020/10/20
        * @author kaiqiang
        * @description { 导出excel }
      */
      exportExcel() {
        let params = {
          page_no: 1,
          page_size: 10,
          shetuan_id: this.params.shetuan_id
        }
        API_Promotion.shetuanGoodsExport(params)
          .then(response => {
            // 处理返回的文件流
            let blob = new Blob([response], {
              type: 'application/vnd.ms-excel;charset=utf-8'
            });
            let date = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate();
            const fileName = date + name + '社区团购商品.xlsx';
            if ('download' in document.createElement('a')) {
              // 非IE下载
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            } else {
              // IE10+下载
              navigator.msSaveBlob(blob, fileName);
            }
          })
          .catch((error) => {
            this.$message({
              type: 'error',
              message: error
            })
          })
      },
      /**
       * @date 2020/06/10
       * @author yg
       * @description {请求商品列表}
       */
      GET_ShetuanGoodsList() {
        this.loading = true;
        this.hisIds.clear();
        API_Promotion.getShetuanGoodsList(this.params).then(response => {
          this.loading = false;
          this.pageData = response;
          this.pageData.data.forEach(item => {
            this.skuIds.push(item.sku_id);
            this.hisIds.set(item.sku_id, item.id);
          })
          this.skuIds = this.pageData.data.map(key => key.sku_id);
          let {
            data_total,
            page_no,
            page_size
          } = response;
          this.paginationData = {
            data_total: data_total,
            page_no: page_no,
            page_size: page_size
          };
        }).catch(() => {
          this.loading = false;
        })
      },
      /**
       * @date 2020/08/20
       * @author kjh
       * @description {保存商品选择器选择的商品}
       */
      refreshFunc(val) {
        const _val = val;
        this.pageData.data.forEach(key => {
          _val.forEach(item => {
            if (item.sku_id === key.sku_id) {
              item.sales_price = key.sales_price;
            }
          })
        })
        this.activityData.goods_data = cloneObj(_val)
        this.skuIds = this.activityData.goods_data.map(key => key.sku_id);
        this.addGoodsList();
      },

      /**
       * @date 2020/08/20
       * @author kjh
       * @description {显示商品选择器}
       */
      selectgoodslist($index) {
        this.showDialog = true;
        this._order = $index;
      },

      /**
       * @date 2020/06/15
       * @author lxw
       * @description {点击批量修改事件}
       */
      modifyValues(e) {
        this.btnVal = e.target.innerHTML;
        this.modifyAllDialog = true;
        this.resetForm('modifyAllForm');
      },

      /**
       * @date 2020/06/20
       * @author lxw
       * @description {批量修改}
       */
      batchAssign(str) {
        this.pageData.data.forEach(item => {
          if (!this.multipleSelection.length) {
            item[str] = this.modifyAll.val;
          } else {
            this.multipleSelection.forEach(_item => {
              if (item.id === _item.id) {
                item[str] = this.modifyAll.val;
              }
            })
          }
        })
      },
      /**
       * @date 2020/06/15
       * @author lxw
       * @description {批量修改提交表单}
       */
      affirmModify() {
        switch (this.btnVal) {
          case '优先级':
            this.batchAssign('priority');
            break;
          case '虚拟数量':
            this.batchAssign('visual_num');
            break;
          case '限购数量':
            this.batchAssign('limit_num');
            break;
          case '团购价格':
            this.batchAssign('shetuan_price');
            break;
          case '团长佣金比例':
            this.batchAssign('first_rate');
            break;
          case '二级团长佣金':
            this.batchAssign('second_rate');
            break;
          case '自提站点佣金':
            this.batchAssign('self_raising_rate');
            break;
          case '邀请佣金比例':
            this.batchAssign('invite_rate');
            break;
        }
        this.modifyAllDialog = false;
      },

      /**
       * @date 2020/06/11
       * @author lxw
       * @description {团购活动商品上线}
       */
      goodOnlineFn(row) {
        this.$confirm('确认上线, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          this.loading = true;
          API_Promotion.amendGoodStatus(row.id, 'ON').then(response => {
            this.loading = false;
            this.$message.success('操作成功！');
            this.GET_ShetuanGoodsList();
          }).catch(() => {
            this.loading = false;
          })
        })
      },

      /**
       * @date 2020/06/15
       * @author lxw
       * @description {团购活动商品下线}
       */
      goodOfflineFn(row) {
        this.$confirm('确认下线, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          this.loading = true;
          API_Promotion.amendGoodStatus(row.id, 'OFF').then(response => {
            this.loading = false;
            this.$message.success('操作成功！');
            this.GET_ShetuanGoodsList();
          }).catch(() => {
            this.loading = false
          })
        })
      },
      /**
       * @date 2020/06/20
       * @author lxw
       * @description {添加商品到列表里}
       */
      addGoodsList() {
        let addArray = [];
        let addForm = {};
        let deleteIds = [];
        this.skuIds.forEach(skuid => {
          if (!this.hisIds.has(skuid)) {
            addArray.push({
              sku_id: skuid,
              shetuan_id: this.params.shetuan_id
            })
            // console.log("历史存在的skuid"+skuid)
          }
        });
        // 删除的商品sku
        for (let key of this.hisIds.keys()) {
          if (this.skuIds.indexOf(key) === -1) {
            deleteIds.push(this.hisIds.get(key));
            break;
          }
        }
        addForm = {
          shetuan_id: this.params.shetuan_id,
          goods_list: addArray,
          delete_ids: deleteIds
        };
        API_Promotion.addGoodsList(addForm).then(response => {
          this.loading = false;
          this.params.page_no = 1;
          this.GET_ShetuanGoodsList();
        }).catch(() => {
          this.loading = false;
        })
      },
      /**
       * @date 2020/06/20
       * @author lxw
       * @description {获取选中项数据}
       */
      selectionChange(val) {
        this.multipleSelection = val;
      },
      /**
       * @date 2020/06/20
       * @author lxw
       * @description {批量删除商品}
       */
      batchDeleteGoods() {
        if (!this.multipleSelection.length) {
          this.$message.warning('请选择需要删除的商品！');
          return;
        }
        let _selectIds = [];
        this.multipleSelection.forEach((item) => {
          _selectIds.push(item.id);
        })
        if (_selectIds.length > 0) {
          let params = {
            'delete_ids': _selectIds
          };
          this.$confirm(`已选中${_selectIds.length}个商品，确定要删除吗？`, '批量删除提示', {
            type: 'warning'
          }).then(() => {
            API_Promotion.deleteGoodsByIds(params, {}).then(() => {
              this.$message.success('批量删除成功');
              this.GET_ShetuanGoodsList();
            })
          })
        }
      },
      /** 切换分组*/
      changeGoodsCateGory(data) {
        if (data.length === 0) {
          this.params = {
            ...this.params
          }
          delete this.params.shop_cat_id;
          this.GET_ShetuanGoodsList();
        } else {
          if (data && Array.isArray(data) && data.length !== 0) {
            console.log(data)
            this.params = {
              ...this.params,
              shop_cat_id: data[(data.length - 1)]
            }
          }
          this.GET_ShetuanGoodsList();
        }
      },
      /**
       * @date 2020/09/15
       * @author 张凯强
       * @description { 排序 }
       */
      tableSortChange(column) {
        if (column.order === 'descending') {
          this.params = {
            ...this.params,
            sort_filed: 'priority_desc'
          }
          this.GET_ShetuanGoodsList();
        } else if (column.order === 'ascending') {
          this.params = {
            ...this.params,
            sort_filed: 'priority_asc'
          }
          this.GET_ShetuanGoodsList();
        } else if (column.order === null) {
          this.GET_ShetuanGoodsList();
        }
      },
      handleSelect(e) {
        this.params = {
          ...this.params,
          status: e
        }
        this.GET_ShetuanGoodsList();
      }
    }
  }

</script>

<style type="text/scss" lang="scss" scoped>
  /deep/ div.toolbar {
    height: 70px;
    padding: 20px 0;
  }
  .container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  /deep/ .el-table {
    width: 100%;
    overflow-x: scroll;
    & th:not(.is-left),
    & td:not(.is-left) {
      text-align: center;
    }
  }

  /deep/ .el-input__inner {
    text-align: center !important;
    padding: 0 0!important;
  }

  /deep/ .el-table__body {
    .el-form-item {
      margin-bottom: 0;
    }

    .el-input-group__prepend {
      padding: 0 12px;
    }

    .el-input-group__append {
      padding: 0 10px;
    }

    .el-form-item__content {
      position: static;
    }

    .el-form-item__error {
      display: inline-block;
      margin-top: -20px;
      margin-left: 12px;
    }

    .cat-show-box {
      display: inline-block;
      position: relative;
      padding-right: 26px;
      max-width: 100%;
      .cat-show-item {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .cat-edit {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -8px;
        line-height: 0;
        .table-edit {
          display: inline-block;
          width: 16px;
          height: 16px;
          line-height: 16px;
          color: #409EFF;
          font-size: 16px;
        }
        &:hover {
          text-decoration: underline;
        }
      }
    }

    .show-cat-name {
      display: inline-block;
      position: relative;
      padding-right: 20px;

      .cat-name {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 14px;
      }

      .table-edit {
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -8px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 16px;
      }
    }

    .el-icon-edit-outline {
      cursor: pointer;
    }
  }

  .color-success {
    color: #30B08F !important;
  }

  .color-red {
    color: red !important;
  }

  /** 工具栏样式 */
  .toolbar {
    display: flex;
    align-items: center;
    height: 44px;
    border-bottom: 1px solid #e6ebf5;
    background-color: #fff;
  }

  .inner-toolbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 20px;
  }

  .self_flex {
    display: flex;
  }

  .input-with-select {
    margin-right: 1rem;
  }

  .el-select {
    width: 100px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .el-input__inner {
    text-align: center !important;
  }

  .img_width {
    width: 60px;
    height: 60px;
  }

  .img_width img {
    width: 100%;
    height: 100%;
  }

  .bottom-total {
    display: flex;
    justify-content: space-between;
    padding: 20px 14px;
    box-sizing: border-box;
    background: #fff;
  }

  .f_weight {
    font-weight: 600;
  }

  .batch_f {
    margin-right: 10px;
    font-size: 14px;
    color: #409EFF;
  }

  .batch_f:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  // .toolbar-search {
  //   width: 20%;
  // }

  div.toolbar-btns {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    .el-button {
      margin-right: 10px;
      & + .el-button {
        margin-left: 0;
      }
    }
    div {
      span {
        display: inline-block;
        font-size: 14px;
        color: #606266;
      }
    }
    .conditions-box,.btn-box{
      display: flex;
    }
    .conditions {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      min-width: 19%;
      .choose-machine {
        width: 62%;
      }
    }
  }

  .i_w {
    width: 86px;
  }

  .notice {
    font-size: 12px;
    margin-left: 108px;
  }

  .m_t {
    margin-top: 8px;
  }

  .round-button {
    width: 16px;
    height: 16px;
  }
  .cat-dialog {
    .el-form {
      .el-form-item {
        margin-bottom: 15px;
        &:last-child {
          margin-bottom: 0;
        }
        .el-button {
          margin-left: 10px !important;
          & + .el-button {
            margin-left: 5px !important;
          }
        }
      }
    }
  }

  .upload {
    text-align: center;
  }
  .el-dropdown-menu.el-popper.el-dropdown-menu--small {
    padding: 0 10px;
    text-align: left;
  }
  .gray_font {
    color: #999999;
  }

</style>
